<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <h1>首页</h1>

    <h3>发送 PUT 请求</h3>
    <!-- 要点1：原始的请求方式必须是 post -->
    <!-- 要点2：新的请求方式通过请求参数发送给服务器端 -->
    <!--    请求参数名：_method  -->
    <!--    请求参数值：新请求方式，例如 put、delete -->
    <form th:action="@{/happy}" method="post">

        <!-- 新的请求方式不需要给用户看到，所以设定为表单隐藏域即可 -->
        <input type="hidden" name="_method" value="put" />

        <button type="submit">提交PUT请求</button>

    </form>

    <form th:action="@{/happy}" method="post">

        <!-- 新的请求方式不需要给用户看到，所以设定为表单隐藏域即可 -->
        <input type="hidden" name="_method" value="delete" />

        <button type="submit">提交DELETE请求</button>

    </form>

    <form th:action="@{/happy}" method="get">

        <button type="submit">提交GET请求</button>

    </form>

    <form th:action="@{/happy}" method="post">

        <button type="submit">提交POST请求</button>

    </form>

    <h3>发送 DELETE 请求</h3>
    <div id="vueElement">
        <!-- GET->POST->DELETE -->
        <!-- 实际开发中，删除操作往往是一个超链接的形式。 -->
        <!-- 超链接本身只能发出一个 GET 请求。 -->
        <!-- 而后端 HiddenHttpMethodFilter 要求必须是 post 请求才能转换成 delete -->
        <!-- 所以现在需要把『点击超链接发出的 GET 请求』转换为『提交表单发出的 POST 请求』 -->
        <!-- 而编写超链接的『单击响应函数』需要借助 JavaScript，为了提高开发效率，需要借助 Vue.js -->
        <form id="convertForm" method="post">
            <input type="hidden" name="_method" value="delete" />
        </form>

        <a th:href="@{/happy/remove/1}" @click="anchorClick">删除一个快乐 1</a><br/>
        <a th:href="@{/happy/remove/2}" @click="anchorClick">删除一个快乐 2</a><br/>
        <a th:href="@{/happy/remove/3}" @click="anchorClick">删除一个快乐 3</a><br/>
    </div>

    <h3>测试Filter顺序对字符集Filter的影响</h3>
    <form th:action="@{/save/message}" method="post">
        <input type="text" name="message" value="年少不知软饭香" />
        <button type="submit">保存</button>
    </form>

    <h3>测试@PathVariable注解</h3>
    <a th:href="@{/get/happy/1}">传送一个值 1</a><br/>
    <a th:href="@{/get/happy/2}">传送一个值 2</a><br/>
    <a th:href="@{/get/happy/3}">传送一个值 3</a><br/>

    <a th:href="@{/save/happy/name/tom/age/20/subject/java}">传送多个值</a><br/>
    <a th:href="@{/save/happy/name/bob/age/30/subject/mysql}">传送多个值</a><br/>
    <a th:href="@{/save/happy/name/peter/age/40/subject/spring}">传送多个值</a><br/>
</body>
<script type="text/javascript" th:src="@{/script/vue.js}"></script>
<script type="text/javascript">

    new Vue({
        "el":"#vueElement",
        "methods":{
            "anchorClick" :function () {
                // 超链接单击响应函数
                console.log("单击响应函数有效");

                // 获取负责转换请求方式的表单的元素对象
                var formEl = document.getElementById("convertForm");

                // 在单击响应函数中通过事件对象获取当前点击的超链接
                console.log(event.target);

                // 通过超链接的元素对象获取超链接的访问地址：href 属性的值
                // 然后赋值给表单的 action 属性，这样提交表单时访问的就是这个地址了
                formEl.action = event.target.href;

                // 提交表单
                formEl.submit();

                // 阻止默认行为，让超链接点了不跳
                event.preventDefault();
            }
        }
    });

</script>
</html>